<template>
  <div class="input-box-group">
    <div ref="item" class="input-box-item" v-for="(i,index) in count" :key="`input-box-group${i}`" :style="{width: `${100/count}%`}">
      <div class="input-box-item-dot" v-if="password[index]!== undefined">
        {{password[index]}}
      </div>
      <img class="input-box-item-square" src="../assets/square.jpg" />
    </div>
  </div>
</template>
<style>
/* 输入框组 */
.input-box-group {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #cccccc; /* no */
  border-right: none; /* 由子元素完成 */
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 单个输入框 */
.input-box-item {
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
  border: none;
  border-right: 1px solid #cccccc; /* no */
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 撑高度的图片 */
.input-box-item-square {
  border: 0;
  width: 100%;
}
/* 显示黑点的动画 */
@keyframes showdot {
  0% {
    color: black;
    background-image: none;
  }
  80% {
    color: black;
    background-image: none;
  }
  100% {
    color: transparent;
    background-image: url('../assets/dot.svg');
  }
}
/* 密码(点)显示样式 */
.input-box-item-dot {
  animation: showdot 0.2s;
  animation-fill-mode: forwards;
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
}
</style>
<script>
export default {
  props: {
    // 密码位数
    count: {
      type: Number,
      required: true
    },
    // 密码内容
    password: {
      type: Array,
      default: function() {
        return []
      }
    }
  }
}
</script>
